<template>
	<gracePage :customHeader="false">
		<view slot="gBody" >
			<view style="margin-top: 35rpx;">
				<!-- reto('/pages/issuer_selection/issuer_selection?banck=储蓄卡') -->
				<view @tap="xuanzefakahang" class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">发卡行：</text>
					<text class="grace-ellipsis" style="position: relative; left: 70rpx; font-size:26rpx;font-weight:400;color:rgba(153,153,153,1);" >{{ fakahangname != '' ? fakahangname:'请选择发卡行'}}</text>
					<image src="../../static/jiantou.png" style="position: absolute;left: 650rpx; width: 20rpx;height: 35rpx;"></image>
				</view>
			</view>
			<view v-show="fakahangname">
			<view class="grace-flex-center" style="width: 750rpx;margin-top: 40rpx;" @tap="getIDCard()">
				<view >
					<image :src=" id_card_img.length>0 ? id_card_img : '../../static/chuxukatu.png'" style=" width: 544rpx;height: 328rpx;"></image>
				</view>
			</view>
			
			<view class="grace-rows grace-flex-center" style="margin: 25rpx 0;">
				<image src="../../static/xiangji.png" style="width: 40rpx;height: 40rpx;"></image>
				<text style="margin-left: 20rpx; font-size:23rpx;font-weight:400;color:rgba(51,51,51,1);">{{ xiangjishuoming }}</text>
			</view>
			</view>
			<view style="margin-top:1rpx;">
				<view class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">储蓄卡卡号：</text>
					<input v-model="chuxukahao" placeholder="请输入储蓄卡号" style="margin-left: 30rpx;width: 500rpx"/>
				</view>
				
				<view class="grace-rows grace-flex-vcenter" style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">预留电话：</text>
					<input v-model="yuliudianhua" placeholder="请输入银行预留手机号码" style="margin-left: 60rpx;width: 500rpx"/>
				</view>
				
				<view style="margin-top: 10rpx;margin-left: 30rpx;">
					<text style="font-size:26rpx;font-weight:400;color:rgba(153,153,153,1);">*仅支持添加本人名下储蓄卡</text>
				</view>
			</view>
			<view>
				<button @tap="submit" style="margin-top: 70rpx; width:500rpx;height:90rpx;background:#1678FF;box-shadow:0px 2rpx 5rpx 0px rgba(67,67,67,0.3);border-radius:20rpx;font-size:32rpx;font-weight:400;color:rgba(255,255,255,1);line-height: 90rpx;">确认</button>
			</view>
		</view>
	</gracePage>
</template>

<script>
// #ifdef APP-PLUS
const card = uni.requireNativePlugin('DC-CardRecognize');
// #endif
import gracePage from "../../graceUI/components/gracePage.vue";
export default {
	data() {
		return {
			fakahangid:'',
			fakahangname:'',
			chuxukahao:'',
			yuliudianhua:'',
			card_img_id:'',
			id_card_img:'',
			xiangjishuoming:'请点击卡片上传图片'
		}
	},
	onLoad:function(opt){
		// #ifdef APP-PLUS
			this.xiangjishuoming='可点击卡面拍照识别'
		// #endif
		// console.log(opt);
		// if ( ! this.isEmptyObject(opt)){
		// 	console.log(opt.id);
		// 	this.fakahangid=opt.id,
		// 	this.fakahangname=opt.name
		// }
		// console.log(this.fakahangname);
	},
	components:{
		gracePage
	},
	methods:{
		xuanzefakahang(){
			uni.$once('xuanzefakahang',this.querenfakahang);
			this.Goto('/pages/issuer_selection/issuer_selection?type=1');
		},
		querenfakahang(data){
			this.fakahangid=data.id,
			this.fakahangname=data.name
		},
		
		tupian(file_base64, path) {
				var vm = this;
				vm.req.post(
					vm.lochost + '/mytrunk/uploadfile/base64upfile', {
						file: file_base64
					}, {},
					function(res) {
						vm.id_card_img = res.data[0].quan_path;
						vm.card_img_id = res.data[0].id;
						console.log(res);
					}
				)
			},
		getIDCard() {
				if(this.fakahangid===''){
					this.msg_show('请先选择发卡行喔！')
				}else{
				// #ifdef APP-PLUS
				var vm = this;
				card.startRecognize({
					maskType: "BankCard"
				}, result => {
					console.log(result.path)
					this.chuxukahao = result.bank_card_number;
					const bitmapT = new plus.nativeObj.Bitmap("test"); //test标识随便取
					// 从本地加载Bitmap图片
					//result.path:ocr识别返回的路径
					if (result.path) {
						bitmapT.load(result.path, function() {
							console.log('加载图片成功');
							const base64 = bitmapT.toBase64Data();
							// base4:已转为base64的图片
							const file_base64 = {
								name: 'pic.jpg',
								base64: base64
							};
							vm.tupian(file_base64, result.path);
							bitmapT.clear();
						}, function(e) {
							console.log('加载图片失败：' + JSON.stringify(e));
						});
					}
					console.log(JSON.stringify(result));
				});
				// #endif
				// #ifndef APP-PLUS
				var vm = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: function (res) {
						var tempFilePaths=res.tempFilePaths;
						 uni.uploadFile({
						            url:vm.lochost+'/mytrunk/uploadfile/upfile', //仅为示例，非真实的接口地址
						            filePath: tempFilePaths[0],
						            name: 'file',
						            formData: {
						                'file': 'pic.jpg'
						            },
						            success: (uploadFileRes) => {
						                const res1 = JSON.parse(uploadFileRes.data);
										vm.id_card_img = res1.data[0].quan_path;
										vm.card_img_id = res1.data[0].id;
						            }
						        });
				    }
				});
				// #endif
				}
			},
		submit(){
			if(this.fakahangid==='' || this.chuxukahao==='' || this.yuliudianhua===''){
				this.msg_show('请将信息填写完整')
			}else{
				var vm=this;
				this.req.post(
				this.lochost+'/index/index?method=add_savings',
				{bank_id:this.fakahangid,
				bank_card:this.chuxukahao,
				bank_tel:this.yuliudianhua,
				sms_code:'bank_binding',
				bank_card_img: ''
				},
				{},
				function(res){
					vm.msg_show(res.msg)
					setTimeout(function(){
						vm.Back(2);
					},500)
					
				}
				)
			}
		},
		isEmptyObject(obj) {
		  for (var key in obj) {
		    return false;
		  }
		  return true;
		}
	}
}
</script>

<style>
</style>
